<template>
    <div class="container">
        <el-card shadow="never">
            <div class="head flex flex-ai-c">
                <div class="fs-16 bold flex flex-ai-c">
                    <span>{{ detail.userName }}</span>
                    <img v-if="detail.sex === 0" src="@/assets/icon-male.png" alt="" class="icon-gender">
                    <img v-if="detail.sex === 1" src="@/assets/icon-female.png" alt="" class="icon-gender">
                </div>
            </div>
            <div class="body mg-t-20">
                <div class="flex mg-b-12">
                    <div class="w-300">
                        <span class="fc-lightgray">月发薪单数：</span>
                        <span class="bold">{{ setDefault(detail.totalPayCount) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">月已领金额：</span>
                        <span class="bold"><span>¥</span>{{ setDefault(detail.received) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">月停发金额：</span>
                        <span class="bold"><span>¥</span>{{ setDefault(detail.stopPay) }}</span>
                    </div>
                    <div class="flex-2">
                        <span class="fc-lightgray">电话号码：</span>
                        <span class="bold">{{ detail.phone }}</span>
                    </div>
                </div>
                <div class="flex">
                    <div class="w-300">
                        <span class="fc-lightgray">月实发金额：</span>
                        <span class="bold"><span>¥</span>{{ setDefault(detail.realHairAmount) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">月待领金额：</span>
                        <span class="bold"><span>¥</span>{{ setDefault(detail.unclaimed) }}</span>
                    </div>
                    <div class="w-300">
                        <span class="fc-lightgray">月失败金额：</span>
                        <span class="bold"><span>¥</span>{{ setDefault(detail.getSalaryFail) }}</span>
                    </div>
                    <div class="flex-2">
                        <span class="fc-lightgray">身份证号：</span>
                        <span class="bold">{{ detail.idCardNo }}</span>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import {
    getEmployeeSalaryHead
} from '@/api/salary'

export default defineComponent({
    components: {},
    props: {
        cardId: {
            type: [String, Number],
            default: ''
        },
        queryMonth: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            detail: {}
        }
    },
    watch: {
        queryData: {
            handler(newval) {
                console.log(77777, newval)
                if (newval) {
                    this.getData()
                }
            },
            deep: true
        }
    },
    computed: {
        setDefault() {
            return (value: string) => {
                return value ?? '0'
            }
        },
        queryData() {
            return {
                queryMonth: this.queryMonth,
                cardId: this.cardId
            }
        }
    },
    methods: {
        getData() {
            getEmployeeSalaryHead({
                idCardNo: this.cardId as any,
                beginPayTime: this.queryMonth.split(',')[0],
                endPayTime: this.queryMonth.split(',')[1]
            }).then((res: any) => {
                this.detail = res || {}
                this.$emit('basicInfo', this.detail)
            })
        }
    }
})
</script>

<style scoped lang="stylus">
.body
  background #F7FBFE
  border-radius 6px
  padding 18px 16px
.w-200
  width 200px
.w-300
  flex: 1
  max-idth 300px
.fc-lightgray
  color #5E617D
.icon-gender
  width 16px
  height 16px
  margin-left 4px
</style>
